﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="<%=getServletContext().getContextPath()%>" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MCE|Payment Failed</title>
    <link rel="stylesheet" href="${contextPath }/resources/css/mce.css"></link>
    <link rel="stylesheet" href="${contextPath }/resources/css/size.css" ></link>
    <link rel="stylesheet" href="${contextPath }/resources/css/jquery-ui.css" ></link>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,300,700,400italic' rel='stylesheet' type='text/css' ></link>
    <script type="text/javascript" src="${contextPath }/resources/js/jquery/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/jquery-ui/jquery-ui.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/validation/validation.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/client/FinishedOrder.js"></script>

</head>
<body>
    <div id="ovl" class="ovl"></div>
    <input type="hidden" id="contextRoot" value="${contextPath}"/>
    <div class="mceContainer">
        <!--HOME BANNER CONTAINER-->
        <div class="afterHeaderContainer">
            <!--NAVIGATION MENU-->
            <%@include file="../right-include/top-header.jsp" %>
            <!--/NAVIGATION MENU-->
        </div>
        <!--/HOME BANNER CONTAINER-->
        <!--MAIN CONTAINER-->
        <div class="mainContainer" style="width: 1100px;">
            <table class="wrapContainer">
                <tr>
                    <td class="left" style="width: 20%;">
                        <!--LEFT CONTAINER-->
                        <div class="wrapDataContainer borderRight">
                            <p class="subject" style="width:200px;">Place Order</p>
                            <p>Your order is based on the information you provide in your quote. This process begins with the configuration details. You can select 'Edit' next to 'Quote Complete' to adjust data you provided in the original quote.</p>
                            <br />
                            <h2 class="order normal-gray">
                                Quote Complete
                                <img src="${contextPath }/resources/images/MCE-Mainsite-Icon.png" />
                            </h2>
                            <h2 class="order">Product Configuration</h2>
                            <h2 class="order">Shipping Details</h2>                            
                            <h2 class="order passed">Finish Order</h2>
                            <div class="quoteProcessContainer">
                                <div class="quote-process-item-active">
                                    <span class="passed" style="margin-left: 5px;">
                                        STEP 1: Place Order
                                    </span>
                                </div>
                                <div class="quote-process-item">
                                    <span style="margin-left: 5px;">
                                        STEP 2: Order Complete
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--/LEFT CONTAINER-->
                    </td>
                    <td>
                        <!--BODY CONTAINER-->
                            <div class="wrapDataContainer">
                            	<div class="wrap-item-container">
                                    <div id="messageContent" class="wrap-message-container error">
                                        <span class="ico"></span>
                                       There was a problem processing your order, please contact MCE (1-800-353-6368) or try again
                                    </div>
                                </div>
                                <br/>
                                <div class="title">
                                    SUBMIT PRODUCT ORDER
                                </div>
                                <div class="wrap-item-container">
                                    <p class="mceTextOrange">
                                        JOB NAME: <span class="bold colorDefault">FPT Test Data</span>
                                    </p>
                                </div>
                                <div class="wrap-item-container">
                                    <p class="dashboad-description">
                                        This is the final step in ordering your new controller(s)! Please acknowledge that you have read the terms and conditions below, enter your P.O. number and select Submit Order.
                                    </p>
                                </div>
                                <div class="wrap-item-container" style="margin: 0px;min-height: 23px">
                                    <h2 style="color:#ff6a00; ; font-size: 13px; margin-bottom: 0px;">Order Summary</h2>
                                </div>
                                <form action="#" id="frmFinishedOrder" method="post">
                                <table class="orange">
                                    <tr>
                                        <td>
                                            <div class="wrap-item-container wd_343" style="margin-bottom: 0px">
                                                <div class="html-control-container">
                                                    <div class="label-wrap bold">Order Number</div>
                                                    <div class="field-wrap" id="orderNumberText">
                                                        20078857
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wrap-item-container wd_343" style="margin-bottom: 0px">
                                                <div class="html-control-container">
                                                    <div class="label-wrap bold">Order Amount</div>
                                                    <div class="field-wrap" id="amountTextOrder">
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wrap-item-container wd_343" style="margin-bottom: 0px">
                                                <div class="html-control-container">
                                                    <div class="label-wrap bold">Currency</div>
                                                    <div class="field-wrap">
                                                        USD
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <div class="wrap-item-container" style="margin-top: 7px;">
                                	<input type="button" onclick="javascript: window.open('${contextPath }/resources/files/PDFOrder.pdf');" class="mce back" style="font-weight:normal" value="DOWNLOAD ORDER"/>
                                </div>
                                
                                <div class="wrap-item-container" style="margin: 0px;min-height: 23px">
                                    <h2 style="color:#ff6a00; font-size: 13px; margin-bottom: 0px;">Payment Options</h2>
                                </div>
                                <div class="wrap-item-container">
                                    <div class="html-control-container">
                                        <div class="label-wrap wd_200 bold">Choose Payment Option: </div>
                                        <div class="field-wrap">
                                            <input id="payByOrder" checked="checked" type="radio" class="mce paymentMethod" value="1" name="paymentMethod" />
                                            <label for="payByOrder" id="labelForPayByOrder" class="bold-and-italic">
                                                Purchase Order
                                            </label>
                                            <div class="clearBoth"></div>
                                            <input id="payByCreditCard" type="radio" class="mce paymentMethod" value="2" name="paymentMethod" />
                                            <label for="payByCreditCard" id="labelForPayByCreditCard" class="inactive bold-and-italic">
                                                Credit Card
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div id="creditCardInfo" class="mce-align-center wd_550" style="margin-top:0px;">
                                    <div class="wrap-item-container">
                                        <div class="html-control-container">
                                            <div class="label-wrap wd_200 bold">Credit Card Type <span class="required">*</span></div>
                                            <div class="field-wrap">
                                                <select class="mce wd_145" style="min-width:inherit" id="conceptCards">
                                                    <option value="V" selected="selected">Visa</option>
                                                    <option value="M">MasterCard</option>
                                                    <option value="A">American Express</option>
                                                    <option value="D">Discover</option>
                                                    <option value="J">JCB</option>
                                                    <option value="9">Check</option>
                                                    <option value="">Other</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>                                    
                                </div>
                                <div class="mce-align-center wd_550" style="margin-top:0px;">
                                    <div class="wrap-item-container" id="purchaseOrder" >
                                        <div class="html-control-container">
                                            <div class="label-wrap wd_200 bold">Purchase Order # </div>
                                            <div class="field-wrap">
                                                <input type="text" class="mce" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wrap-item-container" id="transactionDate" >
                                        <div class="html-control-container">
                                            <div class="label-wrap wd_200 bold">Transaction Date </div>
                                            <div class="field-wrap">
                                                <input id="paymentDate" readonly="readonly" type="text" style="width:143px" class="mce" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wrap-item-container">
                                        <div class="html-control-container">
                                            <div class="label-wrap wd_200 italic bold-and-italic">*Charge Total </div>
                                            <div class="field-wrap normal-and-italic" id="amountChargeText">
                                                $ 5.00
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wrap-item-container">
                                        <div class="html-control-container">
                                            <div class="label-wrap wd_200 bold-and-italic">*Sub Total </div>
                                            <div class="field-wrap normal-and-italic" id="amountChargeSub">
                                                $ 5.00
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="wrap-item-container">
                                    <input id="chkAcceptTermCondition" type="checkbox" />
                                    <label for="chkAcceptTermCondition">
                                        I acknowledge that I have read and agree to the terms and conditions listed
                                        <a href="javascript:alert('Comming soon');">HERE</a>
                                    </label>
                                </div>
                                
                                <div class="wrap-item-container">
                                    <div class="buttonContainer">
                                        <input id="submitOrder" name="submitOrder" type="button" disabled="disabled" style="float:none; text-transform:none;" class="mce disable" value="NEXT" />
                                    </div>
                                </div>
                                </form>
                                
                                
                                
	                                <form id="frmSubmitOrder" action="${contextPath}/firstdata-payment" method="post" name="mainform">
		                                <!-- First Data Request Form -->
		                                <!-- Transaction type -->
		                                <input type="hidden" value="sale" name="transactionType" id="_transactionType"/>
		                                <!-- Payment method -->
		                                <input type="hidden" value="V" name="paymentMethod" id="_paymentMethod"/>
		                                <!-- Payment mode -->
		                                <input type="hidden" value="payonly" name="paymentMode" id="_paymentMode"/>
		                                <!-- Transaction origin -->
		                                <input type="hidden" value="ECI" name="transactionOrigin" id="_transactionOrigin"/>
		                                <!-- Order id -->
		                                <input type="hidden" name="orderId" value="20078857" id="_orderId"/>
		                                <!-- Transaction date -->
		                                <input type="hidden" name="transactionDate" value="" id="_transactionDate"/>
		                                <!-- Charge total -->
		                                <input type="hidden" name="chargeTotal" value="5.00" id="_chargeTotal"/>
										<!-- Sub total -->   
										<input type="hidden" name="subTotal" value="5.00" id="_subTotal"/>                             
		                                <!-- /First Data Request Form -->
		                            </form>
	                            </div>

                       
                        <!--/BODY CONTAINER-->
                    </td>
                    <td class="right" style="width: 20%;">
                        <%@include file="../right-include/right.jsp" %>
                    </td>
                </tr>
            </table>
        </div>
        <!--/MAIN CONTAINER-->
        <!--FOOTER CONTAINER-->
        <div class="footerContainer">
            <img src="${contextPath }/resources/images/Nidec.jpg" />
            <img src="${contextPath }/resources/images/MCE.jpg" />
            <div class="clearBoth" />
            <p class="copyRight">Copyright 2014 Motion Control Engineering. All Rights Reserved</p>
        </div>
        <!--/FOOTER CONTAINER-->
    </div>

</body>
</html>
